@import "../../style/imports";

$checkbox-size: 32px;

.sp-checkbox {
  background: #c6c6c6;
  // border: 1PX solid $color-border-gray;
  border-radius: $checkbox-size;
  width: $checkbox-size;
  height: $checkbox-size;
  line-height: $checkbox-size;
  text-align: center;
  transition: all .1s ease-in;
  color: #fff;
  margin-right: 12px;
  display: inline-block;
  &__wrap {
    display: inline-block;
    line-height: 1;
  }
  &__text {
    display: inline-block;
    vertical-align: middle;
  }
  &__label{
    display: inline-block;
  }
  .at-icon {
    // opacity: 1;
    transform: scale(0.96);
    transition: all .1s ease-in;
    font-size: 20px;
    margin-top: -4px;
  }
}

.sp-checkbox__checked {
  .sp-checkbox {
    background-color: var(--color-primary);
  }
  .at-icon { 
  }
}